<script setup>
    import { computed, onMounted, ref, nextTick } from "vue"
    import {
        useCollapseStore,
        useSelectMenu,
        useAsideMenu,
    } from "../storePiana/index"
    import { useRouter } from "vue-router"

    // 获取 Pinia 中定义的 store 实例
    const CollapseStore = useCollapseStore()
    const SelectMenu = useSelectMenu()
    const AsideMenu = useAsideMenu()
    // const list = [
    //     {
    //         path: "/user",
    //         name: "user",
    //         label: "用户管理",
    //         icon: "user",
    //         url: "UserManage/UserManage",
    //     },
    //     {
    //         label: "其他",
    //         path: "/other",
    //         icon: "location",
    //         children: [
    //             {
    //                 path: "/page1",
    //                 name: "page1",
    //                 label: "页面1",
    //                 icon: "setting",
    //                 url: "Other/PageOne",
    //             },
    //             {
    //                 path: "/page2",
    //                 name: "page2",
    //                 label: "页面2",
    //                 icon: "setting",
    //                 url: "Other/PageTwo",
    //             },
    //         ],
    //     },
    // ]

    let asyncList = AsideMenu.menu // 从 Pinia 中获取侧边栏菜单数据

    onMounted(() => {
        // console.log("AsideMenu.menu", AsideMenu.menu)
    })
    // 使用 computed 计算属性将菜单项分为有子菜单和无子菜单两部分
    const noChildren = computed(() => {
        return asyncList.filter((item) => !item.children)
    })

    const hasChildren = computed(() => {
        return asyncList.filter((item) => item.children)
    })

    const router = useRouter()
    const clickMenu = (item) => {
        router.push({ name: item.name })
        SelectMenu.selectMenu(item)
        // console.log("aside item", item)
    }
    onMounted(async () => {
        await nextTick()
        // console.log("AsideMenu.menu", AsideMenu.menu)
    })
</script>

<template>
    <el-aside :width="CollapseStore.isCollapse ? '180px' : '60px'">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            :collapse="!CollapseStore.isCollapse"
            :collapse-transition="false"
        >
            <h3 v-show="CollapseStore.isCollapse">后台管理系统</h3>
            <el-menu-item
                v-for="(item, index) in noChildren"
                :index="item.name"
                :key="item.path"
                @click="clickMenu(item)"
            >
                <component class="icons" :is="item.icon"></component>
                <span id="spanMenu">{{ item.label }}</span>
            </el-menu-item>
            <el-sub-menu
                v-for="item in hasChildren"
                :index="item.label"
                :key="item.path"
            >
                <template #title>
                    <component class="icons" :is="item.icon"></component>
                    <span id="spanMenu">{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item
                        :index="subItem.path"
                        v-for="subItem in item.children"
                        :key="subItem.path"
                        @click="clickMenu(subItem)"
                    >
                        <component class="icons" :is="subItem.icon"></component>
                        <span> {{ subItem.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu></el-aside
    >
</template>

<style lang="less" scoped>
    .icons {
        width: 18px;
        height: 18px;
    }
    .el-menu {
        border-right: none;
        h3 {
            line-height: 48px;
            color: #fff;
            text-align: center;
        }
        #spanMenu {
            padding-left: 10px;
        }
    }
</style>
